<!-- src/views/admin/AdminGames.vue -->
<template>
  <div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">游戏管理</h1>
      <router-link to="/admin/games/add" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded">
        添加游戏
      </router-link>
    </div>

    <div v-if="loading" class="text-center py-16">
      <i class="fa fa-spinner fa-spin text-blue-500 text-3xl"></i>
    </div>

    <div v-else class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">封面</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发行日期</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
        <tr v-for="game in games" :key="game.id" class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap">
            <img :src="game.coverImage || 'https://picsum.photos/60/60'" alt="Game cover" class="h-12 w-12 rounded">
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="font-medium text-gray-900">{{ game.title }}</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900">{{ game.category }}</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {{ game.releaseDate }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
            <router-link :to="`/admin/games/edit/${game.id}`" class="text-blue-600 hover:text-blue-900 mr-4">编辑</router-link>
            <button @click="deleteGame(game.id)" class="text-red-600 hover:text-red-900">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页控件 -->
    <div class="flex justify-center mt-8">
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">上一页</span>
          <i class="fa fa-chevron-left"></i>
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-700 hover:bg-blue-100">1</a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">8</a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">9</a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">下一页</span>
          <i class="fa fa-chevron-right"></i>
        </a>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      games: [],
      loading: true
    };
  },
  async created() {
    this.fetchGames();
  },
  methods: {
    async fetchGames() {
      try {
        // const response = await this.$axios.get('/api/games');
        // this.games = response.data.games;

        // 模拟数据
        this.games = [
          {
            id: 1,
            title: "赛博朋克2077",
            description: "一款由CD Projekt Red开发的开放世界角色扮演游戏。",
            category: "角色扮演",
            releaseDate: "2020-12-10",
            coverImage: "https://picsum.photos/60/60?random=1"
          },
          {
            id: 2,
            title: "艾尔登法环",
            description: "一款由FromSoftware开发的动作角色扮演游戏。",
            category: "角色扮演",
            releaseDate: "2022-02-25",
            coverImage: "https://picsum.photos/60/60?random=2"
          },
          // 更多模拟游戏...
        ];

        this.loading = false;
      } catch (error) {
        console.error('获取游戏列表失败', error);
        this.loading = false;
      }
    },
    async deleteGame(gameId) {
      if (confirm('确定要删除这款游戏吗？')) {
        try {
          // await this.$axios.delete(`/api/games/${gameId}`);
          // this.fetchGames(); // 重新加载游戏列表
          console.log('游戏已删除');
        } catch (error) {
          console.error('删除失败', error);
        }
      }
    }
  }
}
</script>